<!-- 
	带箭头的多级下拉框 
	1.treeData：下拉数据源
	2.value：默认值
	3.clearable：是否带清空按钮：true带，false不带
	4.filterable：是否带搜索框：true带，false不带
	5.disabled：指定节点选择框是否禁用为节点对象的某个属性值
	6.defaultProps：节点属性值，里面值为：
		{
			label："", //指定节点标签为节点对象的某个属性值
			children:"",//指定子树为节点对象的某个属性值
			disabled:"",//指定节点选择框是否禁用为节点对象的某个属性值
			isLeaf:"",//指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
		}
	7.placeholder：输入关键字进行过滤
	8.size：输入框尺寸
	9.nodeKey：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
-->
<template>
	<el-select
		ref="select"
		v-model="inputValue"
		:disabled="disabled"
		:size="size"
		:placeholder="placeholder"
		:popper-append-to-body="false"
		:clearable="clearable"
		:filterable="filterable"
		:filter-method="handleFilterMethod"
		@change="handleSelectChange"
		@visible-change="handleVisibleChange"
	>
		<el-option hidden :value="inputValue" :label="valueTitle" v-if="treeData.length > 0" />
		<el-tree
			ref="selectTree"
			:data="treeData"
			highlight-current
			default-expand-all
			:props="defaultProps"
			:node-key="nodeKey"
			:expand-on-click-node="false"
			:current-node-key="inputValue"
			:filter-node-method="handleFilterNode"
			@node-click="handleNodeClick"
		></el-tree>
	</el-select>
</template>

<script>
export default {
	name: 'swSearchTreeSelect',
	props: {
		value: {
			type: String,
			default: ''
		},
		treeData: {
			type: Array,
			default() {
				return [];
			}
		},
		clearable: {
			type: Boolean,
			default: false
		},
		filterable: {
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: false
		},
		defaultProps: Object,
		placeholder: String,
		size: String,
		nodeKey: {
			type: String,
			default: 'id'
		}
	},
	data() {
		return {
			inputValue: this.value,
			isShowPulldown: false,
			valueTitle: ''
		};
	},
	watch: {
		value(val) {
			this.inputValue = val;
		},
		inputValue: {
			handler(val) {
				this.$emit('input', val);
				let treeFlatData = this.treeToFlatData(this.treeData);
				let selectedData = treeFlatData.find(item => item.id === val);
				if (!selectedData) {
					this.valueTitle = '';
					this.$nextTick(() => {
						this.$refs['selectTree'].setCurrentKey(null);
					});
				} else {
					this.valueTitle = selectedData.name;
				}
			},
			immediate: true
		}
	},
	methods: {
		//选中的选项
		handleNodeClick(data) {
			this.inputValue = data.id;
			this.$refs['select'].blur();
		},
		treeToFlatData(dataSource) {
			let flatArr = [];
			let dataArr = JSON.parse(JSON.stringify(dataSource));
			const flatFunc = arr => {
				arr.forEach(item => {
					flatArr.push(item);
					!!item.childList && item.childList.length > 0 ? flatFunc(item.childList) : '';
					delete item.childList;
				});
			};
			flatFunc(dataArr);
			return flatArr;
		},

		//选择改变
		handleSelectChange(data) {
			this.inputValue = '';
		},

		//下拉框打开关闭
		handleVisibleChange(flag) {
			if (!flag) return false;
			this.$refs['selectTree'].filter(null);
		},

		handleFilterMethod(val) {
			this.$refs['selectTree'].filter(val);
		},

		//筛选树形分类数据
		handleFilterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		}
	}
};
</script>
<style scoped>
.el-select-dropdown__item {
	height: auto;
	padding: 0;
	font-weight: normal;
}
::v-deep .el-tree-node__content {
	padding-bottom: 0;
	height: auto;
	padding-right: 15px;
}
::v-deep .el-select-dropdown__wrap {
	max-height: 300px;
	line-height: 1;
	scroll-margin-top: 0;
}
</style>
